<template>
  <div>
    <div class="default-box"/>
    <h1 id="login">登录/注册</h1>
    <p id="login" style="color: gray;font-weight: bold">使用邮箱注册</p>
    <div class="default-box"/>
  </div>
  <div id="content">
    <router-view/>
  </div>
  <van-form @submit="onRegister">
    <van-cell-group inset>
      <van-field
          v-model="userAccount"
          name="账户"
          label="账号"
          placeholder="账号,只能由字母和数字组成"
          :rules="[{ required: true, message: '请填写账号' }]"
      />
      <van-field
          v-model="userEmail"
          name="邮箱"
          label="邮箱"
          placeholder="邮箱地址"
      >
        <template #button>
          <van-button :loading=isLoading :loading-text=loadingText size="small" round @click="sendCode(userEmail)">发送验证码
          </van-button>
        </template>
      </van-field>
      <van-field
          v-model="code"
          name="验证码"
          label="验证码"
          placeholder="请输入验证码"
          :rules="[{ required: true, message: '请填写验证码' }]"
      />
      <van-field
          v-model="userPassword"
          type="password"
          name="密码"
          label="密码"
          placeholder="请输入不少于8位的密码"
          :rules="[{ required: true, message: '请填写密码' }]"
      />
      <van-field
          v-model="checkPassword"
          type="password"
          name="密码"
          label="确认密码"
          placeholder="确认密码"
          :rules="[{ required: true, message: '请填写确认密码' }]"
      />
    </van-cell-group>
    <div style="margin: 16px;">
      <van-button type="primary" color="#475164" round block native-type="submit">
        注册
      </van-button>
      <div class="small-box"/>
      <van-button type="primary" color="#475164" round block @click="backToLogin">
        返回登录
      </van-button>
    </div>
  </van-form>

</template>

<script setup lang="ts">
import {ref} from "vue";
import myAxios, {LOGIN_URL} from "../../plugins/myAxios";
import {Notify, Toast} from "vant";
import {useRoute, useRouter} from "vue-router";
import * as timers from "timers";

const route = useRoute();
const router = useRouter();

const userAccount = ref('')
const userEmail = ref('')
const userPassword = ref('')
const checkPassword = ref('')
const studyCode = ref('');
const isLoading = ref(false)
const loadingText = ref('60s')
let countDown = 60
const code = ref('')
const isDev = process.env.NODE_ENV === 'development';

/**
 * 注册接口
 */
const onRegister = async () => {
  const res = await myAxios.post('/user/register', {
    userAccount: userAccount.value,
    userEmail: userEmail.value,
    code: code.value,
    userPassword: userPassword.value,
    checkPassword: checkPassword.value,
    studyCode: studyCode.value
  })
  if (res.code === 0 && res.data) {
    Notify({type: "success", message: '注册成功'});
    window.location.href = isDev ? 'http://localhost:5173/user/login' : LOGIN_URL;
  } else {
    if (res.code === 40000) {
      Toast.fail(res.message)
    }
  }
}
/**
 * 返回登录
 */
const backToLogin = () => {
  router.push({
    path: "/user/login"
  })
}

/**
 * todo 发生邮箱验证码
 */
const sendCode = async (email: string) => {
  if (email.length === 0){
    Toast({type: "fail", message: "邮箱不能为空"})
  }else {
    const res = await myAxios.get(`/user/get-code?email=${email}`)
    if (res.code === 0){
      Notify({type: "success", message: "验证码发送成功!"})
      isLoading.value = true;
      const timer = setInterval(() => {
        if (countDown > 1){
          countDown--
          loadingText.value=`${countDown}s`
        }else {
          countDown = 60
          isLoading.value = false
          clearInterval(timer)
        }
      },1000)
    }else {
      Notify({type: "warning", message: "验证码发送失败!"})
    }
  }
}

</script>

<style scoped>
.default-box {
  margin-top: 20%;
}

.small-box {
  margin-top: 5%;
}

#login {
  padding-left: 24px;
}
</style>